<template>
  <div :class="$style.goodsContainer" v-analytics.pageview>
    <download-bar category="Detail Page" />
    <header :class="$style.header" class="table-row" v-sticky>
      <div
        class="cell"
        @click="goBack"
        v-analytics.click="{
          action: 'Back',
          category: 'Detail Page',
        }"
      >
        <icon name="arrow-left" fontSize="24px" />
      </div>
      <div class="cell" :class="$style.tabHeader">
        <ul>
          <li
            v-for="(item, index) in ['Item', 'Details']"
            @click="tapTabsHandler(index)"
            :class="{[$style.active]: index === currentIndex}"
            v-analytics.click="{
              action: item === 'Item' ? 'Item Tab Click' : 'Details Tab Click',
              category: 'Detail Page',
            }"
          >
            {{item}}
          </li>
      </ul>
      </div>
      <div
        class="cell"
        @click="goHome"
        v-analytics.click="{
          action: 'Home Click',
          category: 'Detail Page',
        }"
      >
        <icon name="shouye" fontSize="24px" />
      </div>
    </header>
    <div v-show="currentIndex === 0">
      <lightbox v-model="showLightbox" :imgList="goodsImgs" />
      <swipe :class="$style.swipe" :auto="0">
        <swipe-item v-for="image in goodsRow.imageList">
          <img
            :src="image.imageUrl"
            class="img-block"
            @click="openLigthBox"
            v-analytics.click="{
              action: 'Goods Image Click',
              category: 'Detail Page',
              label: goodsRow.goodsId + ' '+ goodsRow.goodsTitle,
              callback: openLigthBox,
            }"
          >
        </swipe-item>
      </swipe>
      <div :class="$style.prize">
        <p>First Order Price</p>
        <div>{{goodsRow.currency + goodsRow.couponPrice}}</div>
      </div>
      <div class="container">
        <div :class="$style.intro">
          <p :class="$style.goodsTitle">{{goodsRow.goodsTitle}}</p>
          <div :class="['row', $style.discount]">
            <div class="column-8 fz-20">
              <span v-show="!loading">{{(goodsRow.currency + goodsRow.discountPrice)}}</span>
            </div>
            <div class="column-4 text-right red-color">{{goodsRow.offSale}}</div>
          </div>
          <div class="row">
            <div class="column-6 grey-color" v-show="!loading">
              <s v-show="!loading">{{goodsRow.currency + goodsRow.originalPrice}}</s>
            </div>
            <div class="column-6 text-right">Sold: {{goodsRow.salesTotal}}</div>
          </div>
          <div class="grey-color"></div>
          <div :class="$style.lables">
            <div :class="$style.newUserLabel">
              <label
                v-if="goodsRow.isNewPersonGoods"
                :class="[$style.label, $style.newGoodsLabel]"
              >
                New Juanpier Spacial
              </label>
            </div>
            <label
              v-for="brand in goodsRow.brandTips"
              :class="$style.label"
            >
              {{brand.label}}
            </label>
          </div>
        </div>
        <div :class="['row', $style.advantage]">
          <div class="column-4">
            <img src="~assets/goodsInfo/Globaldeals.png">
            <p class="text-center">Global Deals</p>
          </div>
          <div class="column-4">
            <img src="~assets/goodsInfo/Freeshipping.png">
            <p class="text-center">Free Shipping</p>
          </div>
          <div class="column-4">
            <img src="~assets/goodsInfo/Securepayment.png">
            <p class="text-center">Secure Payment</p>
          </div>
        </div>
        <div :class="$style.propertyList">
          <div class="row" v-for="property in goodsRow.propertyList">
            <div class="column-4 grey-color">{{property.key}}</div>
            <div class="column-8">{{property.val}}</div>
          </div>
        </div>
      </div>
      <div :class="$style.logisticsWrapper">
        <div :class="$style.logistics">
          <p>Juanpi Global Deals</p>
          <img src="~assets/goodsInfo/wl.png" alt="" class="img-block" @click="goToAboutUs">
        </div>
      </div>
      <footer :class="$style.footer">
        <img src="~assets/common/logo.png">
        <dt>Global Deals With Free Shipping</dt>
        <div>
          <v-button type="danger" ghost size="92px 24px" @click="goToAboutUs">Learn More</v-button>
          <v-button type="danger" ghost size="92px 24px" @click="goTo('orderResult')">Download APP</v-button>
        </div>
      </footer>
    </div>
    <div v-show="currentIndex === 1">
      <img :src="image.imageUrl" v-for="image in goodsRow.detailImg" class="img-block">
    </div>
    <v-button
      type="danger"
      v-if="goodsRow.goodsStatus === 1"
      :className="$style.bottomBtn"
      v-analytics.click="{
        action: 'Buy Now ',
        category: 'Detail Page',
        label: goodsRow.goodsId + ' '+ goodsRow.goodsTitle,
        callback: buyNow,
      }"
    >
      {{goodsRow.statusText}}
    </v-button>
    <button
      v-else
      class="v-button"
      :class="[$style.bottomBtn, {
        [$style.btnStatus1]: [5, 6].includes(goodsRow.goodsStatus),
        [$style.btnStatus2]: ![5, 6].includes(goodsRow.goodsStatus),
      }]"
    >
      {{goodsRow.statusText}}
    </button>
    <sku-picker
      v-model="showPicker"
      :skuList="goodsRow.skuList"
      @on-submit="skuPickerHandler"
      :goodsId="goodsRow.goodsId"
      :goodsTitle="goodsRow.goodsTitle"
    />
    <loading :show="loading" :cover="true" />
  </div>
</template>
<script>
import { Swipe, SwipeItem } from 'vue-swipe'
import { mapState } from 'vuex'
import { loading, button, icon, skuPicker, downloadBar } from 'components'
import { auth } from 'utils'
import lightbox from './lightbox'

export default {
  name: 'GoodsInfo',
  components: {
    Swipe,
    SwipeItem,
    vButton: button,
    loading,
    icon,
    skuPicker,
    lightbox,
    downloadBar,
  },
  computed: {
    ...mapState({
      goodsRow: state => state.goodsInfo.goodsRow,
      goodsImgs: state => state.goodsInfo.goodsImgs,
      loading: state => state.goodsInfo.loading,
    }),
  },
  data() {
    return {
      currentIndex: 0,
      showPicker: false,
      showLightbox: false,
    }
  },
  created() {
    document.body.scrollTop = 0
    const { goodsId } = this.$route.query
    if (goodsId) {
      this.$store.dispatch('getGoodsInfo', goodsId)
    }
  },
  methods: {
    goToAboutUs() {
      location.href = 'http://mapi.in.juanpi.com/vue/#/aboutUs'
    },
    goTo(path) {
      this.$router.push(`/${path}`)
    },
    openLigthBox() {
      this.showLightbox = true
    },
    tapTabsHandler(index) {
      this.currentIndex = index
    },
    goBack() {
      this.$router.back()
    },
    goHome() {
      this.$router.push({ path: '/' })
    },
    skuPickerHandler(query) {
      if (!auth.isLogin()) {
        sessionStorage.redirect = this.$route.fullPath
        this.$router.push({ path: '/login' })
        return
      }

      this.$router.push({
        path: '/orderConfirmation',
        query,
      })
    },
    buyNow() {
      this.showPicker = true
    },
  },
}
</script>

<style lang="scss" module>
.goodsContainer {
  // padding-top: 40px;
  padding-bottom: 48px;
}

.active {
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 4px;
    background-color: #FF464E;
    left: 0;
  }
}

.header {
  // position: fixed;
  height: 48px;
  width: 100%;
  // top: 0;
  // z-index: 1000;
  background-color: #fff;
  border-bottom: 1px solid #e7e7e7;
  @media (-webkit-min-device-pixel-ratio: 2) {
    border-width: .5px;
  }
  & > div {
    &:first-child,
    &:last-child {
      width: 48px;
      text-align: center;
    }
  }
}

.tabHeader {
  font-size: 0;
  ul {
    list-style: none;
  }
  li {
    display: inline-block;
    width: 132px;
    font-size: 18px;
    text-align: center;
    line-height: 48px;
    position: relative;
  }
}

.swipe {
  height: 360px;
}

.intro {
  padding: 20px 0 12px;
}

.goodsTitle {
  font-size: 16px;
}

.discount {
  padding-top: 16px;
  padding-bottom: 6px;
}

.lables {
  margin-top: 20px;
  button {
    margin-right: 8px;
    margin-bottom: 8px;
  }
}

.newUserLabel {
  margin-bottom: 8px;
}

.advantage {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 9px 0;
  :global {
    .column-4 {
      text-align: center;
    }
  }
  img {
    width: 20px;
    height: 20px;
  }
  p {
    font-size: 10px;
  }
}

.propertyList {
  padding-top: 12px;
  margin-bottom: 12px;
  :global {
    .row {
      margin-bottom: 12px;
    }
    .column-4 {
      font-size: 12px;
    }
    .column-4,.column-8 {
      overflow-x: scroll;
    }
  }
}

.logisticsWrapper {
  background-color: #F7F7F7;
  padding-top: 12px;
}

.logistics {
  background-color: #fff;
  text-align: center;
  font-size: 12px;
  padding-top: 18px;
  p {
    margin-bottom: 14px;
  }
}

.label {
  line-height: 20px;
  display: inline-block;
  margin-right: 8px;
  padding: 0px 6px;
  color: #FF464E;
  border: 1px solid #FF464E;
  border-radius: 1000px;
  font-size: 10px;
}

.newGoodsLabel {
  background-color: #FF464E;
  color: #fff;
}

.prize {
  height: 56px;
  background-image: url("assets/goodsInfo/banner.png");
  background-size: 100% 100%;
  padding: 9px 12px;
  color: #fff;
  font-size: 20px;
  & > p {
    font-size: 12px;
  }
}

.footer {
  background: #F7F7F7;
  height: 158px;
  text-align: center;
  padding-top: 24px;
  img {
    width: 48px;
    height: 48px;
  }
  dt {
    padding: 7px;
    font-size: 16px;
  }
  button {
    font-size: 10px;
    background-color: transparent;
    &:first-child {
      margin-right: 4px;
    }
  }
}

.bottomBtn {
  position: fixed !important;
  bottom: 0;

  &.btnStatus1 {
    color: #FDC6C8;
  }

  &.btnStatus2 {
    background: #DCDCDC;
    color: #fff;
  }
}

</style>
